<template>
	<view class="">
		<!--  -->
		<ben></ben>
		<!--  -->
		<!-- 顶部 -->
		<view class="head_back">
			<view class="font600 colf font_italic" style="font-size: 25px;padding-left: 30rpx;"
				:style="{ paddingTop: topHight + 'px' }">
				分类
			</view>
			<view class="min30_rl" style="height: 48px; margin-top: 14px;">
				<u-search placeholder="请输入商品名搜索" v-model="search" actionText="搜索"
					@custom="$jump.nav('/indexpackage/user/search?search=' + search)"
					@search="$jump.nav('/indexpackage/user/search?search=' + search)" :showAction="true"
					:animation="true" height="30"></u-search>
			</view>
		</view>
		<!-- 顶部 -->
		<view class="row">
			<!-- 侧边栏 -->
			<view class="column background_f" style="flex: 1.;" :style="{ height: windowHeight + 'px' }">
				<view class="pad40" v-for="(item,index) in list" @click="onType(item.id, index)">
					<view class="size28 font500" :style="classify_id == item.id  ? 'color: #FE9110;' : 'color: #333;'">
						{{item.title}}
					</view>
				</view>
			</view>
			<!-- 侧边栏 -->
			<view class="column" style="flex: 3;" :style="{ height: windowHeight + 'px' }">
				<!-- 销量 -->
				<view class="row padtop40 padbottom20 background_f">
					<view class="minau size26" :class="classifyIndex == classifyindex ? 'col0 font600' : 'col3 font500'"
						v-for="(classifyitem,classifyindex) in classifyList" :key="classifyindex"
						@click="onClassify(classifyindex)">
						{{ classifyitem }}
					</view>
				</view>
				<!-- 销量 -->
				<!-- 商品种类 -->
				<view class="row flexwrap minleft30">
					<view class="size26 font500 rad3 mintop20 minright20" style="padding: 8rpx 26rpx;"
						:class="categoryIndex == -1 ? 'category_no' : 'category'" @click="onCategory(classify_id,-1)">
						全部
					</view>
					<view class="size26 font500 rad3 mintop20 minright20" style="padding: 8rpx 26rpx;"
						:class="categoryindex == categoryIndex ? 'category_no' : 'category'"
						v-for="(categoryitem,categoryindex) in list[cIndex].children" :key="categoryindex"
						@click="onCategory(categoryitem.id,categoryindex)">
						{{ categoryitem.title }}
					</view>
				</view>
				<!-- 商品种类 -->
				<!-- 商品 -->
				<view class="column flex1 mintop20" style="overflow: hidden">
					<scroll-view :scroll-top="0" scroll-y="true" @scrolltolower="scrollBottom" style="overflow: hidden">
						<view class="empty" style="margin-top: 300rpx;" v-if="shop_list.length == 0">
							<u-empty mode="data" icon="https://cdn.uviewui.com/uview/empty/data.png">
							</u-empty>
						</view>
						<view class="column min20_rl" v-else>
							<view class="background_f minbottom30 pad10 rad1 box"
								v-for="(shop_item,shop_index) in shop_list" :key="shop_index"
								@click="$jump.nav('/indexpackage/user/goods_info?id=' + shop_item.id)">
								<view class="row col6 size24 font500 align_item_c">
									<image :src="shop_item.shop.stores_logo" mode="" class="rad1 minright10"
										style="width: 50rpx;height: 50rpx;"></image>
									{{ shop_item.shop.stores_name }}
								</view>
								<view class="row mintop20">
									<image :src="shop_item.image" mode="" style="width: 140rpx;height: 150rpx;">
									</image>
									<view class="column flex1 minleft10">
										<view class="size26 col3 font500">
											{{ shop_item.title }}
										</view>
										<view class="size24 col9 font400 row mintop10">
											规格：{{ shop_item.specs[0].name }}
											<view class="minau minright0">
												月销{{ shop_item.sales }}
											</view>
										</view>
										<view class="size24 font500 row minto minbottom0 align_item_c"
											style="color: #F55726;">
											￥
											<view class="size32">
												{{ shop_item.specs[0].selling_price }}
											</view>
											<view class="minau minright0">
												<image src="@/static/image/2.png" mode="" class="rad50"
													style="width: 50rpx;height: 50rpx;"></image>
											</view>
										</view>
									</view>
								</view>
							</view>
							<view style="margin-top: 50rpx;"><u-loadmore :status="status" /></view>
						</view>


					</scroll-view>
				</view>
				<!-- 商品 -->
			</view>
		</view>
		<!-- 底部tab -->
		<block>
			<userTab :item="1"></userTab>
		</block>
		<!-- 底部tab -->
	</view>
</template>

<script>
	import userTab from "@/components/tabBar/userTab.vue"
	export default {
		components: {
			userTab
		},
		data() {
			return {
				windowHeight: '',
				topHight: '',
				search: '',
				cIndex: 0,
				classify_id: 1,
				category_id: '',
				classifyIndex: 0,
				categoryIndex: -1,
				type: 0,
				page: 1,
				status: 'nomore',
				classifyList: ['综合', '销量', '价格'],
				list: [],
				loadmore: [],
				shop_list: []
			}
		},
		onLoad() {
			this.getClassify()
			let app = uni.getSystemInfoSync()
			let safeAreaBottom = app.screenHeight - app.safeArea.bottom
			this.topHight = app.statusBarHeight + 8
			if (app.statusBarHeight == 0) {
				this.topHight = 50
			}
			if (safeAreaBottom == 0) {
				this.windowHeight = app.windowHeight - safeAreaBottom - this.topHight - 98
			} else {
				this.windowHeight = app.windowHeight - safeAreaBottom - this.topHight - 64
			}
			console.log(this.topHight);
		},
		onHide() {
			uni.removeStorageSync('classify_id')
		},
		onShow() {
			
		},
		methods: {
			async getClassify() {
				let {
					code,
					message,
					data
				} = await this.$com.fetchGet("classify/classify")
				if (code == 200) {
					this.list = data
					const classify_id = uni.getStorageSync('classify_id');
					console.log(classify_id);
					if (!classify_id) {
						this.classify_id = this.list[0].id
						this.cIndex = 0
					} else {
						this.classify_id = classify_id

						this.list.map((item, index) => {

							if (this.classify_id == item.id) {
								console.log(index);
								this.cIndex = index
								return
							}
						})
					}
					this.getClassifyInfo()
				} else {
					console.log(message);
				}
			},
			async getClassifyInfo() {
				let {
					code,
					message,
					data
				} = await this.$com.fetchGet("classify/get_classify_id", {
					classify_id: this.type == 0 ? this.classify_id : this.category_id,
					order: this.classifyIndex == 0 ? '' : this.classifyIndex,
					page: this.page
				})
				if (code == 200) {
					if (this.page != 1) {
						this.loadmore = data.items
						for (var i = 0; i < data.items.length; i++) {
							this.shop_list.push(data.items[i]); // 加载的数据追加在上一页后面
						}
					} else {
						this.loadmore = data.items
						this.shop_list = data.items
					}
				} else if (code == 500) {
					this.shop_list = data
					this.loadmore = data
				} else {
					console.log(message);
				}
			},
			scrollBottom() {
				if (this.page < 0) return;
				this.status = 'loading';
				this.page = ++this.page
				this.getClassifyInfo()
				setTimeout(() => {
					console.log(this.loadmore);
					if (this.loadmore.length == 0) this.status = 'nomore';
					else this.status = 'loading';
				}, 1000)
			},
			onType(id, index) {
				this.type = 0
				this.cIndex = index
				this.classify_id = id
				this.category_id = ''
				this.categoryIndex = -1
				this.getClassifyInfo()
				this.page = 1
			},
			onClassify(index) {
				this.page = 1
				this.classifyIndex = index
				this.getClassifyInfo()
			},
			onCategory(id, index) {
				console.log(index);
				this.page = 1
				this.type = 1
				this.category_id = id
				this.categoryIndex = index
				this.getClassifyInfo()
			}
		}
	}
</script>

<style scoped lang="less">
	.head_back {
		background: linear-gradient(63deg, #FF515E 0%, #FF7F3E 100%), linear-gradient(167deg, #FF6B4A 0%, rgba(255, 123, 77, 0) 100%);
	}

	.category {
		background-color: #EFEFEF;
		border: 2rpx solid #EFEFEF;
	}

	.category_no {
		background-color: #FFAC4A;
		border: 2rpx solid #FFAC4A;
	}

	.box {
		&:nth-last-child(1) {
			margin-bottom: 10rpx;
		}
	}
</style>